<template>
    <div class="continer">
        <div class="inputBox" v-if="meetState!=3">
            <img class="leftLogo" src="@/assets/images/meet1.png" alt="">
            <!-- <input type="text" placeholder="您的见面时间"> -->
            <datetime class="inputH" placeholder="您的见面时间" v-model="meetTime" @on-change="meetTimeFun" ></datetime>
        </div>
        <div class="inputBox" v-if="meetState==2">
            <img class="leftLogo" src="@/assets/images/meet2.png" alt="">
            <input class="inputH" type="text" placeholder="您的见面地点">
        </div>
        <span class="btnH" v-if="meetState==1">见面签到</span>
        <span class="btnH" v-if="meetState==2">提交并领取奖品</span>
        <span class="span1" v-if="meetState==1">见面签到成功后，随机赠送家装优惠大礼包</span>
        <!-- 刮刮乐 -->
        <div class="ggSection" v-if="meetState==3">
            <span class="ggSpan1">恭喜您签见面到成功！</span>
            <div class="ggBox">
                <vue-scratch-card 
                    element-id='scratchWrap'
                    :ratio=0.5
                    :move-radius=20
                    :result-img="imgUrl"
                    :clear-callback='gglClear'
                /><!-- 组件文档https://swift.ctolib.com/zengzoe-vue-scratch-card.html -->
                <span class="ggSpan2">{{gglClearState?'可惜了，您只中了幸运奖':'&nbsp;'}}</span>
                <span class="btnH ggSpan3">领取优惠</span>
            </div>
        </div>
        <!-- 底部 -->
        <empty-tabbar></empty-tabbar>
        <tabbar></tabbar>
    </div>
</template>
<script>
import Tabbar from '@/pages/home/components/Tabbar'
import emptyTabbar from '@/pages/home/components/emptyTabbar'
import { Datetime } from 'vux'

export default {
    name: 'meet',
    components: {
        Tabbar,emptyTabbar,Datetime
    },
    data(){
        return {
            meetState:1,//1见面签到 2提交并领取奖品 3刮刮乐
            imgUrl: '',
            img2:'@/assets/images/test2.jpg',
            gglClearState:false,//刮刮乐是否刮开
            meetTime: '2019-06-28',
        }
    },
    methods:{
        gglClear(){
            this.gglClearState = !this.gglClearState
        },
        // 见面时间
        meetTimeFun(res){
            this.meetTime = res
        }
    }
}
</script>
<style lang="stylus" scoped>
.continer
    width 100%
    display flex
    flex-direction column
    align-items center
    padding-top 30px
    .inputBox
        width 626px
        height 80px
        display flex
        align-items center
        border-bottom 1px solid #dedede;/*no*/
        margin-top 20px
        .leftLogo
            width 24px
            height 30px
            margin 0 38px
        .inputH 
            flex 1
    .btnH
        width 534px
        height 80px
        line-height 80px
        text-align center
        border-radius 10px
        background #ce0021
        color #ffffff
        font-size 28px
        letter-spacing 3px
        margin-top 60px
    .span1
        line-height 22px
        font-size 22px
        color #ce0021
        margin-top 30px
    .ggSection
        display flex
        flex-direction column
        align-items center
        .ggSpan1
            line-height 34px
            font-size 34px
            font-weight bold
            color #ce0021
            letter-spacing 3px
            margin-bottom 28px
            margin-top 30px
        .ggBox
            width 620px
            height 600px
            box-sizing: border-box;
            background: url(../../assets/images/gg2.jpg);
            background-size 100% 100%
            background-position left top
            background-repeat no-repeat
            box-shadow 0 0 10px 2px #f4f4f4
            padding-top 30px
            display flex
            flex-direction column
            align-items center
            .ggSpan2
                line-height 22px
                font-size 22px
                color #ce0021
                margin-top 40px
            .ggSpan3
                margin-top 40px
            .scratchCard 
                position: relative;
                width: 566px;
                height: 339px;
                margin: 0 auto;
                canvas 
                    width: 566px;
                    height: 339px;
            
</style>
